<template>
  <div class="login">
      <div class="login_box">
          <p>点评系统</p>
          <el-form :modle="form" label-width="80" >
            <el-form-item label="账号" >
              <el-input v-model="form.username" />
            </el-form-item>
            <el-form-item label="密码">
              <el-input type="password" v-model="form.password" />
            </el-form-item>

            <el-button type="primary" @click="login">登录</el-button>
            <el-button type="primary" @click="register">注册</el-button>
          </el-form>
        </div>
  </div>
  
  
</template>

<script>
import axios from 'axios';
import { getLoginUrl } from '@/api';


export default {
  data() {
    return {
      form:{
        username:'',
        password:''
      }
    }
  },
methods: {
    login(){  
      const loginUrl = getLoginUrl(); 
      console.log(loginUrl);
       axios
          .post(loginUrl,{
             username:this.form.username,
             password:this.form.password
          })
         
          .then(response=> {    //箭头函数是什么
              var _this = this;   //这里要在外面定义this
            console.log(response.data);
            console.log(response.status);
              if(response.status==200){//成功
                    var json=response.data;
                    if(json.code==1){
                      _this.$router.replace({ //跳转页面
                      path:"/Home"
                      })
                    }else{
                      _this.$alert('登录失败!', '失败!');
                      _this.$router.replace({ //跳转页面
                      path:"/"
                      })
                    }  
              }else{//状态码不为200
                _this.$alert('找不到服务器⊙﹏⊙∥!', '失败!');
              }
           })
          },

          //没写没写
    register(){
          this.$router.replace({
            path:'/register'
          })
        }
       },
    }
</script>

<style>

*{
  margin: 0;
  padding: 0;
}

.login{
  background-color: antiquewhite;
  height: 100vh;
  padding-top: 5%;
}

.login_box{
  background-color: #eb4e4e60;
  width:30%;
  height: 450px;
  margin: auto;
  /* margin-top: 5%; */
  text-align: center;
  border-radius: 10px;
  padding: 45px 45px;
}

p{
  font-size: 20px;
  color:rgb(255, 255, 255);
  margin-top: 3%;
}


</style>

